<template>
	<view class="page">
		<view class="box absolute-auto">
			<view class="title">登录</view>
			<!-- 手机号 -->
			<view class="inpVue margin50">
				<view class="label">手机号</view>
				<input type="number" placeholder="请输入手机号" v-model="name"/>
			</view>
			
			<!-- 验证码 -->
			<view class="inpVue margin50">
				<view class="label">验证码</view>
				<view class="flex align-center">
					<input type="number" placeholder="请输入验证码" v-model="code"/>
					<view class="btn" :class="{btnActive: $u.test.mobile(name)}" @click="sendCode()">{{ text }}</view>
				</view>
			</view>
			<!-- 登录按钮 -->
			<view class="loginBtn margin60" :class="{loginActive: $u.test.mobile(name) && code}" @click="loginFun()">登录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "",
				code: "",
				text: '获取验证码',
				isSend: false,
			}
		},
		methods: {
			async loginFun(){
				if (!this.$u.test.mobile(this.name)) return this.$u.toast("请输入正确手机号")
				if (!this.code) return this.$u.toast("请输入验证码")
				uni.showLoading()
				const res = await this.$request("/aiet-user-center/user/codeLogin", {
					phone: this.name,
					code: this.code
				})
				if (res.code === 200) {
					uni.hideLoading()
					this.$u.toast('登录成功');
					// uni.setStorageSync('chat-token', res.obj);
					this.$store.dispatch("getUser")
					setTimeout(() => {
						uni.switchTab({url: "../videoMaker/index"});
					},1000);
				} else {
					uni.hideLoading()
					this.$u.toast(res.msg);
				}
			},
			async sendCode(){
				if (!this.$u.test.mobile(this.name)) return this.$u.toast("请输入正确手机号")
				if (this.isSend) return
				this.isSend = true;
				uni.showLoading()
				const res = await this.$request('/aiet-user-center/user/sendCode', {
					phone: this.name,
				});
				if (res.code === 200) {
					uni.hideLoading()
					this.$u.toast('发送成功');
					let count = 60;
					this.text = `${count}s`;
					let timer = setInterval(() => {
						count--;
						this.text = `${count}s`;
						if (count === 0) {
							clearInterval(timer);
							this.text = '获取验证码';
							this.isSend = false;
						}
					}, 1000);
				} else {
					uni.hideLoading()
					this.$u.toast(res.msg);
					this.isSend = false;
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.page {
		width: 100vw;
		height: 100vh;
		background: linear-gradient(to bottom, #48D685, #3C87EF);
		position: relative;
		.box {
			width: 690rpx;
			background: #fff;
			border-radius: 12rpx;
			padding:  80rpx 40rpx 100rpx;
			.title {
				font-weight: 600;
				color: #000;
				font-size: 34rpx;
				text-align: center;
			}
			.inpVue {
				width: 100%;
				.label {
					font-size: 26rpx;
					color: #747F88;
				}
				input {
					flex: 1;
					height: 100rpx;
					margin-top: 18rpx;
					border: 1rpx solid #f5f5f5;
					border-radius: 12rpx;
					font-size: 30rpx;
					padding-left: 20rpx;
					display: block;
					color: #000;
				}
				.btn {
					width: 200rpx;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					margin-top: 18rpx;
					margin-left: 20rpx;
					border-radius: 12rpx;
					background: #ccc;
				}
				.btnActive {
					background: linear-gradient(to right, #48D685, #3C87EF);
				}
			}
			.loginBtn {
				width: 100%;
				height: 88rpx;
				background: #ccc;
				border-radius: 12rpx;
				line-height: 88rpx;
				text-align: center;
				color: #fff;
				font-size: 30rpx;
			}
			.loginActive {
				background: #3C87EF;
			}
		}
	}
</style>
